<script setup lang="ts">
import { computed } from 'vue';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Loading from '@/home/components/Loading.vue';
import { RouterLink } from 'vue-router';

const currPage = defineModel<number>({ required: true });
const props = defineProps<{
  title: string;
  totalPage: number;
  loading: boolean;
  link?: string;
}>();
const isLeftDisabled = computed(() => currPage.value <= 1);
const isRightDisabled = computed(() => currPage.value >= props.totalPage);
</script>

<template>
  <div>
    <div class="mb-32 flex justify-between">
      <div v-if="props.link">
        <RouterLink :to="props.link">
          <h2 class="text-16 font-500 leading-22 hover:underline">{{ props.title }}</h2>
        </RouterLink>
      </div>
      <div v-else>
        <h2 class="text-16 font-500 leading-22">{{ props.title }}</h2>
      </div>
      <div class="h-20 flex items-center gap-10">
        <LoadingBox :loading="props.loading">
          <template #default>
            <button :class="['bg-transparent', isLeftDisabled ? 'c-hex-a09d9d' : 'c-hex-28303f']" :disabled="isLeftDisabled" @click="currPage--">
              <div class="i-icons:arrow-left-2 h-20 w-10"></div>
            </button>
            <button :class="['bg-transparent', isRightDisabled ? 'c-hex-a09d9d' : 'c-hex-28303f']" :disabled="isRightDisabled" @click="currPage++">
              <div class="i-icons:arrow-right-2 h-20 w-10"></div>
            </button>
          </template>
          <template #loading>
            <div class="min-h-100 flex-center">
              <Loading class="size-16 color-hex-8b8b8b" />
            </div>
          </template>
        </LoadingBox>
      </div>
    </div>
    <LoadingBox :loading="props.loading">
      <template #default>
        <slot v-if="totalPage > 0"></slot>
        <div v-else class="min-h-100 text-center color-hex-8b8b8b">{{ $t('home.common.emptyContent') }}</div>
      </template>
      <template #loading>
        <div class="min-h-100 flex-center">
          <Loading class="size-16 color-hex-8b8b8b" />
        </div>
      </template>
    </LoadingBox>
  </div>
</template>

<style lang="scss" scoped>
</style>
